import React, { useState, useEffect, useCallback } from 'react';
import { getSofBillingFindInvoice } from '../../../../api'
import { message, Modal, Table } from 'antd'

const BillListModule = ({ billListShow, setBillListShow, clickId }) => {
    const [listData, setListData] = useState([])
    const listFun = useCallback(
        () => {
            if(clickId) {
                ; (async () => {
                    const { code, msg, data } = await getSofBillingFindInvoice({ billId: clickId })
                    if (code === '20000') {
                        setListData(data)
                    } else {
                        message.error(msg)
                    }
                })()
            }
        },
        [clickId],
    )
    useEffect(() => {
        listFun()
    }, [listFun])
    const handleOk = () => {
        setBillListShow(false);
    };

    const handleCancel = () => {
        setBillListShow(false);
    };
    const columns = [
        {
            title: '发票类型',
            dataIndex: 'invoiceKind',
            render: (text) => <span>{text ? "增值税专用发票" : "普通发票"}</span>
        },
        {
            title: '开票金额',
            dataIndex: 'invoiceMoney'
        },
        {
            title: '发票编号',
            dataIndex: 'invoiceNo'
        },
        {
            title: '开票时间',
            dataIndex: 'invoiceTime'
        },
        {
            title: '开票抬头',
            dataIndex: 'invoiceTitle'
        },
    ];

    return (
        <Modal title="开票信息" visible={billListShow} onOk={handleOk} onCancel={handleCancel} footer = {false}>
            <Table dataSource={listData} columns={columns} bordered pagination={false} size='small' rowKey = 'id' />
        </Modal>
    )
}

export default BillListModule